<template>
  <view class="cate">
    <!-- 搜索框 -->
    <Search/>
    <view class="neirong">
      <view class="content">
        <!-- 分类列表左侧 -->
        <view class="cateleft" @click="tagChange($event)">
          <view :class="index === active ? 'cateitem active' : 'cateitem'" v-for="(item, index) in cateList" :key="index" :data-activeIndex="index" data-name="leftCate">
            {{ item.cat_name }}
          </view>
        </view>
        <!-- 分类列表右侧 -->
        <view class="cateright">
          <view class="rightdata" v-for="(item, index) in cateList[active].children" :key="item.cat_id">
            <view class="righttitle">
              / {{item.cat_name}} /
            </view>
            <view class="rightLoopBox" @click="searchShop($event)">
              <view class="rightChildren" v-for="(subitem,subindex) in item.children" :key="subitem.cat_id">
                  <view class="subicon">
                    <img 
                    :src="subitem.cat_icon" 
                    alt="图片加载失败!" 
                    :data-catname="subitem.cat_name" 
                    :data-catid="subitem.cat_id" 
                    data-name="rightCate"/>
                  </view>
                  <view 
                  class="subtitle" 
                  :data-catname="subitem.cat_name" 
                  :data-catid="subitem.cat_id" 
                  data-name="rightCate">
                    {{subitem.cat_name}}
                  </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cateList: [],
        active:0
      }
    },
    onLoad(){
      this.getCategories()
    },
    methods: {
      async getCategories(){
        let {data} = await uni.$http.get('categories')
        if(data.meta.status !== 200) return wx.showToast({title:'数据请求失败！'})
        this.cateList = data.message
        // console.log(data.message);
      },
      tagChange(e){
        let key = e.target.dataset;
        if(key.name === 'leftCate') this.active = parseInt(key.activeindex)
      },
      searchShop(e){
        let key = e.target.dataset;
        if(key.name === 'rightCate'){
          wx.navigateTo({url:`/pages/shoplist/shoplist?keyword=${key.catname}&catid=${key.catid}`})
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cate{
    height: 100%;
    overflow: hidden;
    .neirong{
      height: calc( 100vh - 110rpx );
      overflow: hidden;
      .content{
        display: flex;
        .cateleft{
          flex: 3;
          height: calc( 100vh - 110rpx );
          overflow: auto;
          .active{
            border-left: 6rpx solid #c00;
            background-color: white !important;
            padding-right: 6rpx;
          }
          .cateitem{
            height: 120rpx;
            line-height: 120rpx;
            text-align: center;
            font-size: 28rpx;
            background-color: #F6F8FA;
          }
        }
        .cateright{
          flex: 11;
          height: calc( 100vh - 110rpx );
          overflow: auto;
          .righttitle{
            text-align: center;
            height: 90rpx;
            font-size: 26rpx;
            line-height: 90rpx;
          }
          .rightLoopBox{
            .rightChildren{
              vertical-align: top;
              display: inline-block;
              margin: 0 35rpx;
              .subicon{
                img{
                  width: 125rpx;
                  height: 125rpx;
                }
              }
              .subtitle{
                height: 50rpx;
                text-align: center;
                font-size: 25rpx;
              }
            }
            
            
          }
        }
      }
    }
  }
</style>
